<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        function testJson(){
            // 获取输入的用户名和密码
            var username = $("#username").val();
            var psw = $("#password").val();
            $.ajax({
                url : "/hello",
                type : "post",
                // data表示发送的数据
                data : {username:username,password:psw},
                // 定义发送请求的数据格式为JSON字符串
                //contentType : "application/json;charset=UTF-8",
                //定义回调响应的数据格式为JSON字符串,该属性可以省略
                //dataType : "json",
                //成功响应的结果
                success : function(data){
                    if(data != null){
                        alert("您输入的用户名为："+data.username+
                            "密码为："+data.password);
                    }
                }
            });
        }
    </script>
</head>
<body>
<form>
    用户名:<input type="text" name="username" id="username"/><br/>
    密&nbsp;&nbsp;&nbsp;码:<input  type="password" name="password" id="password"/><br/>
    <button onclick="testJson()">测试JSON交互</button>
</form>

</body>
</html>